<template>
	<view class="container">
		<view class="avatar">
			<!-- 上传组件 -->
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="avatar" width="100"
				height="100" style="border-radius: 100%;" :maxCount="1"></u-upload>
		</view>

		<u--form labelPosition="left" :model="LoginUser" :rules="rules" ref="uForm">
			<u-form-item label="昵称" prop="nickname" borderBottom>
				<u--input v-model="LoginUser.nickname" border="none"></u--input>
			</u-form-item>
			<u-form-item label="手机" prop="mobile" borderBottom>
				<u--input v-model="LoginUser.mobile" border="none"></u--input>
			</u-form-item>
			<u-form-item label="邮箱" prop="email" borderBottom>
				<u--input v-model="LoginUser.email" border="none"></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom>
				<u--input type="password" v-model="LoginUser.password" border="none"></u--input>
			</u-form-item>
		</u--form>
		<view style="margin-top: 25px;">
			<u-button type="warning" @click="submit">修改资料</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				LoginUser: {},
				fileList: [],
				rules: {
					mobile: [
						{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							if(value){
								return uni.$u.test.mobile(value);
							} else {
								return true
							}
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					email: [{
						type: 'email',
						required: false,
						message: '请填正确的邮箱',
						trigger: ['blur', 'change']
					}],
					password: [{
						min: 6,
						max: 14,
						message: '密码长度在6-14个字符之间',
						trigger: ['blur', 'change']
					}, ]
				}
			}
		},
		onLoad() {
			this.LoginUser = uni.getStorageSync('LoginUser') ? uni.getStorageSync('LoginUser') : {};
			this.fileList.push({
				url: this.LoginUser.avatar_text
			})
			this.LoginUser.password = ''
			console.log(this.LoginUser)
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 上传
			async afterRead(event) {
				this.fileList.push({
					url: event.file.thumb
				})
				console.log(event)
				let data = {
					filePath: event.file.thumb, // 要上传文件资源的路径。
					name: 'avatar', // 文件对应的 key 
					header: {},
					/* 会与全局header合并，如有同名属性，局部覆盖全局 */
					formData: {
						adminid: this.LoginUser.id
					}, // HTTP 请求中其他额外的 form data
				}
				let result = await this.$u.api.admin.avatar(data)
				if (result.code == 1) {
					this.LoginUser.avatar_text = result.data
					uni.setStorageSync('LoginUser', this.LoginUser)
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: result.msg
					})
				}
			},
			// 删除
			deletePic() {
				this.fileList = []
			},
			// 修改资料
			submit() {
				this.$refs.uForm.validate().then(async (res) => {
					let data = {
						id: this.LoginUser.id,
						nickname: this.LoginUser.nickname,
						mobile: this.LoginUser.mobile,
						email: this.LoginUser.email
					}
					// 判断是否有没有修改密码
					if(this.LoginUser.password){
						data.password = this.LoginUser.password
					}
					let result = await this.$u.api.admin.profile(data)
					if (result.code == 1) {
						uni.setStorageSync('LoginUser',  result.data)
						this.LoginUser = result.data
						this.LoginUser.password = ''
						this.$refs.uToast.show({
							type: 'success',
							message: result.msg,
							complete() {
								uni.switchTab({
									url: '/pages/admin/index'
								});
							}
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: result.msg
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style>
	.container {
		height: 100%;
		margin: 0 50rpx;
		box-sizing: border-box;
	}

	.avatar {
		text-align: center;
	}

	.u-avatar {
		margin: 80rpx auto 40rpx;
	}

	.xcx {
		width: 200rpx;
		height: 200rpx;
		margin: 80rpx auto 40rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.nickname {
		font-size: 14px;
		text-align: center;
	}

	.title {
		text-align: center;
		margin: 40rpx 0;
		font-size: 14rpx;
	}

	.avatar .u-upload {
		justify-content: center;
		align-items: center;
		margin: 3em auto;

	}
</style>
